<template>
  <div class="container">
    <!-- 百度地图容器 -->
    <div ref="mapContainer" class="mapp"></div>

    <!-- 站点弹窗 -->
    <el-dialog
      v-model="centerDialogVisible"
      title="站点介绍"
      width="650"
      align-center
    >
      <img :src="currentSiteImage" style="width: 620px; height: auto" />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="centerDialogVisible = false">
            关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import siteInformationImage from "@/assets/station_information.jpg";

// 定义百度地图API的常量
const COORDINATE_SYSTEM_WGS84 = 1; // WGS84坐标系
const COORDINATE_SYSTEM_BD09 = 5; // 百度BD09坐标系

// 定义多个站点的 WGS84 坐标和相关信息
const sites = [
  {
    name: "绍兴综合观测场",
    lng: 120.512179,
    lat: 29.968135,
    imgSrc: "https://s2.loli.net/2025/01/09/oGuhEbTISOwXFNx.jpg", // 绍兴站图片
    siteInformationSrc: siteInformationImage,
  },
  {
    name: "嘉兴观测站",
    lng: 120.8219444,
    lat: 30.931889,
    imgSrc: "https://s2.loli.net/2025/02/13/dcEZ38ige5FLwAn.jpg", // 嘉善站图片
    siteInformationSrc: siteInformationImage,
  },
  {
    name: "无锡观测站",
    lng: 120.5441667,
    lat: 31.6536111,
    imgSrc: "https://s2.loli.net/2025/02/13/RNHEpKmbX8Mnh4Y.jpg", // 无锡站图片
    siteInformationSrc: siteInformationImage,
  },
];

// 百度地图容器引用
const mapContainer = ref(null);
// 百度地图实例
let baiduMap;
// 弹窗是否显示
const centerDialogVisible = ref(false);
// 当前站点的图片
const currentSiteImage = ref("");

// 创建自定义覆盖物的 DOM 结构
function createDOM() {
  const div = document.createElement("div");
  div.style.backgroundColor = "rgba(6, 82, 221, 0.4)";
  div.style.color = "white";
  div.style.height = "140px";
  div.style.width = "160px";
  div.style.padding = "2px";
  div.style.lineHeight = "30px";
  div.style.whiteSpace = "nowrap";
  div.style.fontSize = "15px";
  div.style.borderRadius = "5px";
  div.style.display = "flex";
  div.style.flexDirection = "column";
  div.style.justifyContent = "space-evenly";
  div.style.alignItems = "center";

  // 标题
  const title = document.createElement("div");
  title.style.fontSize = "14px";
  title.style.fontWeight = "700";
  title.appendChild(document.createTextNode(this.properties.title));
  div.appendChild(title);

  // 图片
  const img = document.createElement("img");
  img.style.width = "150px";
  img.src = this.properties.imgSrc;
  div.appendChild(img);

  // 三角形
  const arrow = document.createElement("div");
  arrow.style.position = "absolute";
  arrow.style.top = "144px";
  arrow.style.left = "0px";
  arrow.style.width = "0";
  arrow.style.height = "0";
  arrow.style.borderColor =
    "rgba(6, 82, 221, 0.4) transparent transparent transparent";
  arrow.style.borderStyle = "solid";
  arrow.style.borderWidth = "10px";
  div.appendChild(arrow);

  return div;
}

// 初始化地图并添加覆盖物
onMounted(async () => {
  if (mapContainer.value) {
    // 初始化百度地图
    baiduMap = new BMapGL.Map(mapContainer.value);
    baiduMap.centerAndZoom(new BMapGL.Point(120.9218, 30.8411), 8.5);
    baiduMap.enableScrollWheelZoom(true);
    baiduMap.setMapType(BMAP_EARTH_MAP);

    // 将站点的 WGS84 坐标转换为百度坐标系
    const convertor = new BMapGL.Convertor();
    const points = sites.map((site) => new BMapGL.Point(site.lng, site.lat));

    convertor.translate(
      points,
      COORDINATE_SYSTEM_WGS84,
      COORDINATE_SYSTEM_BD09,
      (data) => {
        if (data.status === 0) {
          // 遍历转换后的点，添加覆盖物
          data.points.forEach((point, index) => {
            const site = sites[index];

            // 添加为覆盖物

            // 创建自定义覆盖物
            // const customOverlay = new BMapGL.CustomOverlay(createDOM, {
            //   point: new BMapGL.Point(point.lng, point.lat),
            //   properties: {
            //     title: site.name,
            //     imgSrc: site.imgSrc,
            //   },
            // });

            // // 添加覆盖物到地图
            // baiduMap.addOverlay(customOverlay);

            // // 绑定点击事件
            // customOverlay.addEventListener("click", () => {
            //   centerDialogVisible.value = true; // 显示弹窗
            //   currentSiteImage.value = site.siteInformationSrc; // 设置当前站点信息的图片
            //   baiduMap.setCenter(point); // 将地图中心点设置为当前点
            // });

            // 添加为标记

            // 创建点标记
            const marker = new BMapGL.Marker(point);

            // 添加点标记到地图
            baiduMap.addOverlay(marker);

            // 绑定点击事件
            marker.addEventListener("click", () => {
              centerDialogVisible.value = true; // 显示弹窗
              currentSiteImage.value = site.siteInformationSrc; // 设置当前站点信息的图片
              baiduMap.setCenter(point); // 将地图中心点设置为当前点
            });
          });
        } else {
          console.error("坐标转换失败");
        }
      }
    );
  }
});
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  padding: 1%;
  .mapp {
    width: 98%;
    height: 98%;
  }
}
</style>